<script setup>
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted, onBeforeUnmount } from "vue"
const { proxy } = getCurrentInstance();
import * as echarts from "echarts";
import axios from 'axios'
import moment from "moment";
import _ from "lodash";
let echart = echarts;


var day_option = {
    title: {
        text: '分时统计',
        left: 'center',
    },
    legend: {
        data: ['昨日', '今日'],
        type: 'scroll',
        textStyle: { color: "#fff" },
        top: '0',
        x: 'right',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    color: ["#62c98d", "#2f89cf"],
    grid: {
        top: '14%',
        left: '15',
        right: '35',
        bottom: '12%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '00时'],
    }],
    yAxis: [{
        name: '',
        type: 'value',
        axisTick: { show: false },
    }],
    dataZoom: [{
        show: true,
        height: 12,
        xAxisIndex: [
            0
        ],
        bottom: 5,
        start: 30,
        end: 80,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
            color: "#d3dee5",
        },

        textStyle: {
            color: "#fff"
        },
        borderColor: "rgba(240,240,240,.5)"

    }],
    series: [
        {
            name: '昨日',
            type: 'bar',

            barWidth: '30',
            data: []
        },
        {
            name: '今日',
            type: 'bar',

            barWidth: '30',
            data: []
        }
    ]
};

var month_option = {
    title: {
        text: '月度统计',
        left: 'center',
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{b}:<br/>告警数量:{c}'
    },
    grid: {
        left: '0',
        right: '20',
        top: '55',
        bottom: '20',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
        axisLabel: {
            show: true,
        }
    }],
    series: [{
        name: '完成率',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            width: 3
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(98, 201, 141, 0.5)'
            }, {
                offset: 1,
                color: 'rgba(98, 201, 141, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
        },
        itemStyle: {
            color: '#4cb9cf',
            borderColor: 'rgba(98, 201, 141,0.27)',
            borderWidth: 12
        },
        data: []
    }]
};

var model_option = {
    title: {
        text: '模型统计',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    grid: {
        top: '50',
        left: '15',
        right: '35',
        bottom: '12%',
        containLabel: true
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: '50%',
            data: [
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

var golbal_option = {
    title: {
        text: '系统统计',
        left: 'center',
    },
    xAxis: {
        type: 'category',
        data: ['告警总数', '模型总数', '视频接入总数', '推理任务总数', '用户总数']
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{b}<br/>{c}'
    },
    yAxis: {
        type: 'log'
    },
    color: ["#2f89cf"],
    grid: {
        top: '14%',
        left: '15',
        right: '35',
        bottom: '12%',
        containLabel: true
    },
    series: [
        {
            data: [3200, 20, 15, 10, 3],
            type: 'bar'
        }
    ]
};

onMounted(() => {
    loadData();
})


function loadData() {

    loadDayList();

    loadSystem();

    loadModelList();

    loadMonthList();
}

async function loadSystem() {
    try {

        var ret = await axios.get('/api/stat/system');

        if (ret.data.code === 0) {
            golbal_option.series[0].data.length = 0;
        
            golbal_option.series[0].data.push(ret.data.data.alarmCount);
            golbal_option.series[0].data.push(ret.data.data.modelCount);
            golbal_option.series[0].data.push(ret.data.data.mediaCount);
            golbal_option.series[0].data.push(ret.data.data.taskCount);
            golbal_option.series[0].data.push(ret.data.data.userCount);
        }
        if (!golbal_chart) {
            golbal_chart = echart.init(proxy.$refs.chartGolbal);

        }
        golbal_chart.setOption(golbal_option);

        window.addEventListener("resize", function () {
            golbal_chart.resize();
        });

    } catch (error) {

    }
}


async function loadDayList() {

    try {
        var ret = await axios.get('/api/stat/twoday');

        if (ret.data.code === 0) {

            day_option.series[0].data.length = 0;
            day_option.series[1].data.length = 0;
            //console.log(ret.data.data);

            ret.data.data["0"].forEach((v) => {
                day_option.series[0].data.push(v.value);
            })
            ret.data.data["1"].forEach((v) => {
                day_option.series[1].data.push(v.value);
            })
        }
        if (!day_chart) {
            day_chart = echart.init(proxy.$refs.chartDay);
        }
        day_chart.setOption(day_option);
        window.addEventListener("resize", function () {
            day_chart.resize();
        });
    } catch (error) {

    }
}

async function loadMonthList() {
    try {

        var ret = await axios.get('/api/stat/month');

        if (ret.data.code === 0) {
            month_option.series[0].data.length = 0;
            ret.data.data.forEach((v) => {
                month_option.series[0].data.push(v.value);
            })
        }

        if (!month_chart) {
            month_chart = echart.init(proxy.$refs.chartMonth);

        }
        month_chart.setOption(month_option);
        window.addEventListener("resize", function () {
            month_chart.resize();
        });

    } catch (error) {

    }
}


async function loadModelList() {
    try {
        var ret = await axios.get('/api/stat/model');

        if (ret.data.code === 0) {

            model_option.series[0].data.length = 0;
            //console.log(ret.data.data);
            ret.data.data.forEach((v) => {
                model_option.series[0].data.push(v);
            });
        }
        if (!model_chart) {
            model_chart = echart.init(proxy.$refs.chartModel);

        }
        model_chart.setOption(model_option);
        window.addEventListener("resize", function () {
            model_chart.resize();
        });

    } catch (error) {

    }
}

var golbal_chart = null;
var model_chart = null;

var day_chart = null;
var month_chart = null;


</script>

<template>
    <el-card>

        <el-card style="margin:10px 0px">
            <el-row>
                <el-col :span="12">
                    <div ref="chartGolbal" class="echart-container"></div>
                </el-col>
                <el-col :span="12">
                    <div ref="chartModel" class="echart-container"></div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <div ref="chartMonth" class="echart-container"></div>
                </el-col>

                <el-col :span="12">
                    <div ref="chartDay" class="echart-container"></div>
                </el-col>

            </el-row>
        </el-card>


    </el-card>
</template>

<style scoped>
.echart-container {
    margin-top: 5px;
    width: 100%;
    height: 400px;
}

::v-deep(.el-card > .el-card__body) {
    padding: 4px !important;
}


.card-custom {
    padding: 0px;
    margin: 4px;
    position: relative;
}

.card-header {
    height: 30px;
    color: #555;
    font-weight: bold;
    font-family: '微软雅黑';
    text-align: center;
}

::v-deep(.el-card > .el-card__header) {
    padding: 2px;
}

::v-deep(.el-card > .el-card__body) {
    padding: 4px;
}
</style>